import { Button, Modal, Table } from "antd";
import {
  changeModal,
  changeParams,
  getAdminUserAsync,
} from "@/store/adminUser/adminUserSlice";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import type { TableProps } from "antd";
import dayjs from "@/utils/dayjs";
import { TZ } from "@/utils/env";
import { deleteApi } from "@/store/adminUser/adminUserAPI";

export interface DataType {
  id: number;
  password: string;
  c_time: number;
  admin_user_id: number;
  username: string;
  account_permission: number;
}

export default function MTable() {
  const dispatch = useAppDispatch();
  const { params, table } = useAppSelector((state) => state.adminUser);
  const {
    config: { data: { data: { admin_permission = [] } = {} } = {} } = {},
  } = useAppSelector((state) => state.app);

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "时间",
      dataIndex: "c_time",
      key: "c_time",
      align: "center",
      render: (text) => dayjs.unix(text).tz(TZ).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "用户ID",
      dataIndex: "admin_user_id",
      key: "admin_user_id",
      align: "center",
    },
    {
      title: "用户名",
      dataIndex: "username",
      key: "username",
      align: "center",
    },
    {
      title: "权限",
      dataIndex: "account_permission",
      key: "account_permission",
      align: "center",
      render: (text) =>
        admin_permission?.find?.((i) => i.value === text)?.label,
    },
    {
      title: "操作",
      dataIndex: "opt",
      key: "opt",
      align: "center",
      render: (_text, record) => {
        return <Button.Group size="small">
          <Button type="primary" ghost onClick={() => {
            dispatch(changeModal({
              type: 'update',
              open: true,
              record
            }))
          }}>编辑</Button>
          <Button type="primary" danger onClick={() => {
            Modal.confirm({
              title: '确认删除吗？',
              onOk: () => new Promise<void>((resolve, reject) => {
                deleteApi({
                  db_id: record.id
                }).then(() => {
                  resolve()
                  dispatch(getAdminUserAsync({...params}))
                }).catch(reject)
              })
            })
          }}>删除</Button>
        </Button.Group>;
      },
    },
  ];

  return (
    <Table
      columns={columns}
      scroll={{ x: "max-content" }}
      bordered
      loading={table.status === "loading"}
      pagination={{
        total: table?.data?.data?.count,
        current: params?.page,
        pageSize: params?.page_size,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total: number, range: [number, number]): string =>
          `${range[0]}-${range[1]}条/共${total}条`,
        onChange: (page: number, pageSize: number): void => {
          dispatch(changeParams({ page, page_size: pageSize }));
          dispatch(
            getAdminUserAsync({
              ...params,
              page,
              page_size: pageSize,
            })
          );
        },
      }}
      dataSource={table?.data?.data?.data_list || []}
      size="small"
      rowKey="id"
    />
  );
}
